<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery学习笔记</title>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        header {
            text-align: center;
            padding: 20px 0;
            background-color: #2c3e50;
            color: white;
            margin-bottom: 20px;
        }
        h1, h2, h3 {
            color: #2c3e50;
        }
        h1 {
            margin: 0;
        }
        nav {
            background-color: #34495e;
            padding: 10px;
            margin-bottom: 20px;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }
        nav li {
            margin-right: 20px;
        }
        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        nav a:hover {
            background-color: #2c3e50;
        }
        .section {
            margin-bottom: 30px;
            padding: 15px;
            border-left: 4px solid #3498db;
            background-color: #ecf0f1;
        }
        .subsection {
            margin: 15px 0;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
        }
        .method {
            margin: 10px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-left: 3px solid #2ecc71;
        }
        .example {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 10px;
            border-radius: 5px;
            font-family: "Consolas", "Courier New", monospace;
            margin: 10px 0;
            overflow-x: auto;
        }
        .advantages {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .advantage {
            background-color: #3498db;
            color: white;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.9em;
        }
        .tips {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .tip {
            flex: 1;
            min-width: 300px;
            background-color: #fff;
            padding: 15px;
            border: 1px solid #e74c3c;
            border-radius: 5px;
        }
        footer {
            text-align: center;
            padding: 20px;
            background-color: #2c3e50;
            color: white;
            margin-top: 20px;
        }
        @media (max-width: 768px) {
            nav ul {
                flex-direction: column;
            }
            nav li {
                margin: 5px 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>jQuery学习笔记</h1>
        <p>jQuery核心概念与使用方法的完整指南</p>
    </header>

    <nav>
        <ul id="navigation">
            <li><a href="#基础概念">基础概念</a></li>
            <li><a href="#选择器">选择器</a></li>
            <li><a href="#DOM操作">DOM操作</a></li>
            <li><a href="#遍历">遍历</a></li>
            <li><a href="#事件处理">事件处理</a></li>
            <li><a href="#动画效果">动画效果</a></li>
            <li><a href="#Ajax">Ajax</a></li>
            <li><a href="#实用技巧">实用技巧</a></li>
        </ul>
    </nav>

    <div class="container">
        <section id="基础概念" class="section">
            <h2>基础概念</h2>

            <div class="subsection">
                <h3>jQuery简介</h3>
                <p><strong>定义：</strong>jQuery是一个快速、简洁的JavaScript库，使HTML文档遍历和操作、事件处理、动画和Ajax等操作更加简单</p>
                <p><strong>核心理念：</strong>$()函数是jQuery的核心，用于选择元素和创建jQuery对象</p>
                <p><strong>优势：</strong></p>
                <div class="advantages">
                    <div class="advantage">简化JavaScript编程</div>
                    <div class="advantage">跨浏览器兼容性</div>
                    <div class="advantage">链式调用</div>
                    <div class="advantage">丰富的插件生态系统</div>
                </div>
            </div>

            <div class="subsection">
                <h3>jQuery对象与DOM对象</h3>
                <p><strong>DOM对象：</strong>通过原生JavaScript获取的元素对象</p>
                <p><strong>jQuery对象：</strong>通过jQuery选择器获取的对象，是对DOM对象的包装</p>
                <p><strong>转换方法：</strong></p>
                <ul>
                    <li>DOM转jQuery: <code>$(domElement)</code></li>
                    <li>jQuery转DOM: <code>jqueryObject[0]</code> 或 <code>jqueryObject.get(0)</code></li>
                </ul>
            </div>
        </section>

        <section id="选择器" class="section">
            <h2>选择器</h2>

            <div class="subsection">
                <h3>基本选择器</h3>
                <div class="method">
                    <h4>元素选择器</h4>
                    <p><strong>语法：</strong><code>$('element')</code></p>
                    <p><strong>示例：</strong><code>$('p') // 选择所有p标签</code></p>
                </div>
                <div class="method">
                    <h4>ID选择器</h4>
                    <p><strong>语法：</strong><code>$('#id')</code></p>
                    <p><strong>示例：</strong><code>$('#myId') // 选择id为myId的元素</code></p>
                </div>
                <div class="method">
                    <h4>类选择器</h4>
                    <p><strong>语法：</strong><code>$('.class')</code></p>
                    <p><strong>示例：</strong><code>$('.myClass') // 选择所有class为myClass的元素</code></p>
                </div>
                <div class="method">
                    <h4>通配符选择器</h4>
                    <p><strong>语法：</strong><code>$('*')</code></p>
                    <p><strong>示例：</strong><code>$('*') // 选择所有元素</code></p>
                </div>
                <div class="method">
                    <h4>组合选择器</h4>
                    <p><strong>语法：</strong><code>$('selector1,selector2')</code></p>
                    <p><strong>示例：</strong><code>$('h1,p') // 选择所有h1和p标签</code></p>
                </div>
            </div>

            <div class="subsection">
                <h3>层级选择器</h3>
                <div class="method">
                    <h4>后代选择器</h4>
                    <p><strong>语法：</strong><code>$('ancestor descendant')</code></p>
                    <p><strong>示例：</strong><code>$('.topnav li') // 选择.topnav元素内的所有li元素</code></p>
                </div>
                <div class="method">
                    <h4>子元素选择器</h4>
                    <p><strong>语法：</strong><code>$('parent > child')</code></p>
                    <p><strong>示例：</strong><code>$('.topnav > li') // 选择.topnav的直接子元素li</code></p>
                </div>
                <div class="method">
                    <h4>相邻兄弟选择器</h4>
                    <p><strong>语法：</strong><code>$('prev + next')</code></p>
                    <p><strong>示例：</strong><code>$('div + p') // 选择紧跟在div后面的p元素</code></p>
                </div>
                <div class="method">
                    <h4>通用兄弟选择器</h4>
                    <p><strong>语法：</strong><code>$('prev ~ siblings')</code></p>
                    <p><strong>示例：</strong><code>$('div ~ p') // 选择div后面的所有p兄弟元素</code></p>
                </div>
            </div>

            <div class="subsection">
                <h3>属性选择器</h3>
                <div class="method">
                    <h4>存在属性选择器</h4>
                    <p><strong>语法：</strong><code>$('[attribute]')</code></p>
                    <p><strong>示例：</strong><code>$('[name]') // 选择具有name属性的所有元素</code></p>
                </div>
                <div class="method">
                    <h4>相等属性选择器</h4>
                    <p><strong>语法：</strong><code>$('[attribute=value]')</code></p>
                    <p><strong>示例：</strong><code>$('[name=user]') // 选择name属性值为user的元素</code></p>
                </div>
                <div class="method">
                    <h4>包含属性选择器</h4>
                    <p><strong>语法：</strong><code>$('[attribute*=value]')</code></p>
                    <p><strong>示例：</strong><code>$('[name*=sxt]') // 选择name属性值包含sxt的元素</code></p>
                </div>
                <div class="method">
                    <h4>开始属性选择器</h4>
                    <p><strong>语法：</strong><code>$('[attribute^=value]')</code></p>
                    <p><strong>示例：</strong><code>$('[name^=sxt]') // 选择name属性值以sxt开头的元素</code></p>
                </div>
                <div class="method">
                    <h4>结束属性选择器</h4>
                    <p><strong>语法：</strong><code>$('[attribute$=value]')</code></p>
                    <p><strong>示例：</strong><code>$('[name$=web]') // 选择name属性值以web结尾的元素</code></p>
                </div>
                <div class="method">
                    <h4>空格分割属性选择器</h4>
                    <p><strong>语法：</strong><code>$('[attribute~=value]')</code></p>
                    <p><strong>示例：</strong><code>$('[name~=sxt]') // 选择name属性值包含sxt(空格分隔)的元素</code></p>
                </div>
                <div class="method">
                    <h4>连字符分割属性选择器</h4>
                    <p><strong>语法：</strong><code>$('[attribute|=value]')</code></p>
                    <p><strong>示例：</strong><code>$('[alt|=sxt]') // 选择alt属性值为sxt或以sxt-开头的元素</code></p>
                </div>
            </div>

            <div class="subsection">
                <h3>基本过滤选择器</h3>
                <div class="method">
                    <h4>首元素选择器</h4>
                    <p><strong>语法：</strong><code>$(':first')</code></p>
                    <p><strong>示例：</strong><code>$('tr:first') // 选择第一个tr元素</code></p>
                </div>
                <div class="method">
                    <h4>末元素选择器</h4>
                    <p><strong>语法：</strong><code>$(':last')</code></p>
                    <p><strong>示例：</strong><code>$('tr:last') // 选择最后一个tr元素</code></p>
                </div>
                <div class="method">
                    <h4>奇数索引选择器</h4>
                    <p><strong>语法：</strong><code>$(':odd')</code></p>
                    <p><strong>示例：</strong><code>$('tr:odd') // 选择索引为奇数的tr元素(从0开始)</code></p>
                </div>
                <div class="method">
                    <h4>偶数索引选择器</h4>
                    <p><strong>语法：</strong><code>$(':even')</code></p>
                    <p><strong>示例：</strong><code>$('tr:even') // 选择索引为偶数的tr元素</code></p>
                </div>
                <div class="method">
                    <h4>索引选择器</h4>
                    <p><strong>语法：</strong><code>$(':eq(index)')</code></p>
                    <p><strong>示例：</strong><code>$('li:eq(2)') // 选择索引为2的li元素</code></p>
                </div>
                <div class="method">
                    <h4>大于索引选择器</h4>
                    <p><strong>语法：</strong><code>$(':gt(index)')</code></p>
                    <p><strong>示例：</strong><code>$('td:gt(4)') // 选择索引大于4的td元素</code></p>
                </div>
                <div class="method">
                    <h4>小于索引选择器</h4>
                    <p><strong>语法：</strong><code>$(':lt(index)')</code></p>
                    <p><strong>示例：</strong><code>$('td:lt(4)') // 选择索引小于4的td元素</code></p>
                </div>
            </div>
        </section>

        <section id="DOM操作" class="section">
            <h2>DOM操作</h2>

            <div class="subsection">
                <h3>内容操作</h3>
                <div class="method">
                    <h4>html()方法</h4>
                    <p><strong>功能：</strong>获取或设置元素的HTML内容</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('.box').html() // 获取内容</div>
                    <div class="example">$('.box').html('新内容') // 设置内容</div>
                </div>
                <div class="method">
                    <h4>text()方法</h4>
                    <p><strong>功能：</strong>获取或设置元素的文本内容</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('.box').text() // 获取文本</div>
                    <div class="example">$('.box').text('新文本') // 设置文本</div>
                </div>
                <div class="method">
                    <h4>val()方法</h4>
                    <p><strong>功能：</strong>获取或设置表单元素的值</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('input').val() // 获取值</div>
                    <div class="example">$('input').val('新值') // 设置值</div>
                </div>
            </div>

            <div class="subsection">
                <h3>属性操作</h3>
                <div class="method">
                    <h4>attr()方法</h4>
                    <p><strong>功能：</strong>获取或设置元素属性</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('img').attr('src') // 获取src属性</div>
                    <div class="example">$('img').attr('src', 'new.jpg') // 设置src属性</div>
                </div>
                <div class="method">
                    <h4>removeAttr()方法</h4>
                    <p><strong>功能：</strong>移除元素属性</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('img').removeAttr('src') // 移除src属性</div>
                </div>
                <div class="method">
                    <h4>prop()方法</h4>
                    <p><strong>功能：</strong>获取或设置元素属性(推荐用于checked, selected等)</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('input').prop('checked') // 获取选中状态</div>
                    <div class="example">$('input').prop('checked', true) // 设置选中状态</div>
                </div>
                <div class="method">
                    <h4>removeProp()方法</h4>
                    <p><strong>功能：</strong>移除元素属性</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('input').removeProp('checked') // 移除checked属性</div>
                </div>
            </div>

            <div class="subsection">
                <h3>样式操作</h3>
                <div class="method">
                    <h4>css()方法</h4>
                    <p><strong>功能：</strong>获取或设置元素样式</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').css('color') // 获取颜色</div>
                    <div class="example">$('div').css('color', 'red') // 设置颜色</div>
                    <div class="example">$('div').css({'color': 'red', 'font-size': '14px'}) // 设置多个样式</div>
                </div>
                <div class="method">
                    <h4>addClass()方法</h4>
                    <p><strong>功能：</strong>为元素添加类</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').addClass('newClass') // 添加newClass类</div>
                </div>
                <div class="method">
                    <h4>removeClass()方法</h4>
                    <p><strong>功能：</strong>移除元素的类</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').removeClass('oldClass') // 移除oldClass类</div>
                </div>
                <div class="method">
                    <h4>toggleClass()方法</h4>
                    <p><strong>功能：</strong>切换元素的类</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').toggleClass('active') // 切换active类</div>
                </div>
                <div class="method">
                    <h4>hasClass()方法</h4>
                    <p><strong>功能：</strong>检查元素是否包含指定类</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').hasClass('active') // 检查是否包含active类</div>
                </div>
            </div>

            <div class="subsection">
                <h3>节点操作</h3>
                <div class="method">
                    <h4>内部插入</h4>
                    <p><strong>append()方法：</strong>向元素内部末尾追加内容</p>
                    <div class="example">$('ul').append('&lt;li&gt;新项目&lt;/li&gt;')</div>
                    <p><strong>prepend()方法：</strong>向元素内部开头追加内容</p>
                    <div class="example">$('ul').prepend('&lt;li&gt;新项目&lt;/li&gt;')</div>
                    <p><strong>appendTo()方法：</strong>将元素追加到指定元素内部末尾</p>
                    <div class="example">$('&lt;li&gt;新项目&lt;/li&gt;').appendTo('ul')</div>
                    <p><strong>prependTo()方法：</strong>将元素追加到指定元素内部开头</p>
                    <div class="example">$('&lt;li&gt;新项目&lt;/li&gt;').prependTo('ul')</div>
                </div>
                <div class="method">
                    <h4>外部插入</h4>
                    <p><strong>after()方法：</strong>在元素后面插入内容</p>
                    <div class="example">$('div').after('&lt;p&gt;新段落&lt;/p&gt;')</div>
                    <p><strong>before()方法：</strong>在元素前面插入内容</p>
                    <div class="example">$('div').before('&lt;p&gt;新段落&lt;/p&gt;')</div>
                    <p><strong>insertAfter()方法：</strong>将元素插入到指定元素后面</p>
                    <div class="example">$('&lt;p&gt;新段落&lt;/p&gt;').insertAfter('div')</div>
                    <p><strong>insertBefore()方法：</strong>将元素插入到指定元素前面</p>
                    <div class="example">$('&lt;p&gt;新段落&lt;/p&gt;').insertBefore('div')</div>
                </div>
                <div class="method">
                    <h4>删除节点</h4>
                    <p><strong>remove()方法：</strong>删除元素及其绑定的事件和数据</p>
                    <div class="example">$('div').remove()</div>
                    <p><strong>detach()方法：</strong>删除元素但保留绑定的事件和数据</p>
                    <div class="example">$('div').detach()</div>
                    <p><strong>empty()方法：</strong>清空元素内容</p>
                    <div class="example">$('div').empty()</div>
                </div>
                <div class="method">
                    <h4>复制节点</h4>
                    <p><strong>clone()方法：</strong>复制元素</p>
                    <div class="example">$('div').clone() // 浅复制</div>
                    <div class="example">$('div').clone(true) // 深复制(包含事件)</div>
                </div>
            </div>
        </section>

        <section id="遍历" class="section">
            <h2>遍历</h2>

            <div class="subsection">
                <h3>祖先遍历</h3>
                <div class="method">
                    <h4>parent()方法</h4>
                    <p><strong>功能：</strong>获取直接父元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('p').parent().css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>parents()方法</h4>
                    <p><strong>功能：</strong>获取所有祖先元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('p').parents().css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>parentsUntil()方法</h4>
                    <p><strong>功能：</strong>获取直到指定元素的所有祖先元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('p').parentsUntil('div').css('border', '2px solid red')</div>
                </div>
            </div>

            <div class="subsection">
                <h3>后代遍历</h3>
                <div class="method">
                    <h4>children()方法</h4>
                    <p><strong>功能：</strong>获取直接子元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('.first').children().css('border', '1px solid red')</div>
                    <div class="example">$('.first').children('li').css('border', '1px solid red')</div>
                </div>
                <div class="method">
                    <h4>find()方法</h4>
                    <p><strong>功能：</strong>获取后代元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('.first').find('li').css('border', '1px solid red')</div>
                </div>
            </div>

            <div class="subsection">
                <h3>兄弟遍历</h3>
                <div class="method">
                    <h4>siblings()方法</h4>
                    <p><strong>功能：</strong>获取所有兄弟元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('.text').siblings().css('border', '2px solid red')</div>
                    <div class="example">$('.text').siblings('p').css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>next()方法</h4>
                    <p><strong>功能：</strong>获取下一个兄弟元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').next().css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>nextAll()方法</h4>
                    <p><strong>功能：</strong>获取后面所有兄弟元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').nextAll().css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>nextUntil()方法</h4>
                    <p><strong>功能：</strong>获取直到指定元素的所有后面兄弟元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').nextUntil('span').css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>prev()方法</h4>
                    <p><strong>功能：</strong>获取上一个兄弟元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').prev().css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>prevAll()方法</h4>
                    <p><strong>功能：</strong>获取前面所有兄弟元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').prevAll().css('border', '2px solid red')</div>
                </div>
                <div class="method">
                    <h4>prevUntil()方法</h4>
                    <p><strong>功能：</strong>获取直到指定元素的所有前面兄弟元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').prevUntil('p').css('border', '2px solid red')</div>
                </div>
            </div>

            <div class="subsection">
                <h3>遍历方法</h3>
                <div class="method">
                    <h4>each()方法</h4>
                    <p><strong>功能：</strong>遍历jQuery对象，为每个匹配元素执行函数</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('li').each(function(index, ele){ console.log(index, ele); })</div>
                </div>
                <div class="method">
                    <h4>map()方法</h4>
                    <p><strong>功能：</strong>通过函数匹配当前集合中的每个元素，产生新的jQuery对象</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('li').map(function(index, ele){ console.log(index, ele); })</div>
                </div>
                <div class="method">
                    <h4>get()方法</h4>
                    <p><strong>功能：</strong>通过jQuery对象获取对应的DOM元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">var li = $('li').get(0); li.innerHTML = '新的列表'</div>
                </div>
            </div>
        </section>

        <section id="事件处理" class="section">
            <h2>事件处理</h2>

            <div class="subsection">
                <h3>页面加载事件</h3>
                <div class="method">
                    <h4>$(document).ready()</h4>
                    <p><strong>功能：</strong>DOM加载完成后执行</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$(document).ready(function(){ // 代码 });</div>
                    <p><strong>简写形式：</strong></p>
                    <div class="example">$(function(){ // 代码 });</div>
                </div>
                <div class="method">
                    <h4>window.onload</h4>
                    <p><strong>功能：</strong>所有资源加载完成后执行</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">window.onload = function(){ // 代码 }</div>
                </div>
            </div>

            <div class="subsection">
                <h3>事件绑定</h3>
                <div class="method">
                    <h4>bind()方法</h4>
                    <p><strong>功能：</strong>为元素绑定事件</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('button').bind('click', function(){ // 代码 })</div>
                </div>
                <div class="method">
                    <h4>on()方法</h4>
                    <p><strong>功能：</strong>为元素绑定事件(推荐使用)</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('button').on('click', function(){ // 代码 })</div>
                </div>
                <div class="method">
                    <h4>简写事件方法</h4>
                    <p><strong>click()：</strong></p>
                    <div class="example">$('button').click(function(){ // 代码 })</div>
                    <p><strong>dblclick()：</strong></p>
                    <div class="example">$('button').dblclick(function(){ // 代码 })</div>
                    <p><strong>mouseenter()：</strong></p>
                    <div class="example">$('div').mouseenter(function(){ // 代码 })</div>
                    <p><strong>mouseleave()：</strong></p>
                    <div class="example">$('div').mouseleave(function(){ // 代码 })</div>
                    <p><strong>hover()：</strong></p>
                    <div class="example">$('div').hover(function(){ // 进入执行 }, function(){ // 离开执行 })</div>
                </div>
            </div>

            <div class="subsection">
                <h3>事件解绑</h3>
                <div class="method">
                    <h4>unbind()方法</h4>
                    <p><strong>功能：</strong>解除元素绑定的事件</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('button').unbind('click')</div>
                </div>
                <div class="method">
                    <h4>off()方法</h4>
                    <p><strong>功能：</strong>解除元素绑定的事件(推荐使用)</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('button').off('click')</div>
                </div>
            </div>

            <div class="subsection">
                <h3>事件对象</h3>
                <div class="method">
                    <h4>常用属性</h4>
                    <ul>
                        <li><strong>type：</strong>事件类型</li>
                        <li><strong>target：</strong>触发事件的元素</li>
                        <li><strong>currentTarget：</strong>绑定事件的元素</li>
                        <li><strong>pageX/pageY：</strong>鼠标相对于页面的坐标</li>
                        <li><strong>which：</strong>按键码</li>
                    </ul>
                </div>
                <div class="method">
                    <h4>常用方法</h4>
                    <ul>
                        <li><strong>preventDefault()：</strong>阻止默认行为</li>
                        <li><strong>stopPropagation()：</strong>阻止事件冒泡</li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="动画效果" class="section">
            <h2>动画效果</h2>

            <div class="subsection">
                <h3>基础动画</h3>
                <div class="method">
                    <h4>show()方法</h4>
                    <p><strong>功能：</strong>显示元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').show() // 立即显示</div>
                    <p><strong>参数：</strong></p>
                    <div class="example">$('div').show(1000) // 1秒内显示</div>
                </div>
                <div class="method">
                    <h4>hide()方法</h4>
                    <p><strong>功能：</strong>隐藏元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').hide() // 立即隐藏</div>
                    <p><strong>参数：</strong></p>
                    <div class="example">$('div').hide(1000) // 1秒内隐藏</div>
                </div>
                <div class="method">
                    <h4>toggle()方法</h4>
                    <p><strong>功能：</strong>切换元素显示状态</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').toggle() // 切换显示/隐藏</div>
                </div>
            </div>

            <div class="subsection">
                <h3>滑动动画</h3>
                <div class="method">
                    <h4>slideDown()方法</h4>
                    <p><strong>功能：</strong>向下滑动显示元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').slideDown()</div>
                </div>
                <div class="method">
                    <h4>slideUp()方法</h4>
                    <p><strong>功能：</strong>向上滑动隐藏元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').slideUp()</div>
                </div>
                <div class="method">
                    <h4>slideToggle()方法</h4>
                    <p><strong>功能：</strong>切换元素滑动显示状态</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').slideToggle()</div>
                </div>
            </div>

            <div class="subsection">
                <h3>淡入淡出动画</h3>
                <div class="method">
                    <h4>fadeIn()方法</h4>
                    <p><strong>功能：</strong>淡入显示元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').fadeIn()</div>
                </div>
                <div class="method">
                    <h4>fadeOut()方法</h4>
                    <p><strong>功能：</strong>淡出隐藏元素</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').fadeOut()</div>
                </div>
                <div class="method">
                    <h4>fadeToggle()方法</h4>
                    <p><strong>功能：</strong>切换元素淡入淡出状态</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').fadeToggle()</div>
                </div>
                <div class="method">
                    <h4>fadeTo()方法</h4>
                    <p><strong>功能：</strong>淡入到指定透明度</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').fadeTo(1000, 0.5) // 1秒内淡入到50%透明度</div>
                </div>
            </div>

            <div class="subsection">
                <h3>自定义动画</h3>
                <div class="method">
                    <h4>animate()方法</h4>
                    <p><strong>功能：</strong>执行自定义动画</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').animate({left: '250px'}, 1000)</div>
                </div>
            </div>

            <div class="subsection">
                <h3>动画队列</h3>
                <div class="method">
                    <h4>stop()方法</h4>
                    <p><strong>功能：</strong>停止元素当前动画</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').stop()</div>
                </div>
                <div class="method">
                    <h4>delay()方法</h4>
                    <p><strong>功能：</strong>延迟执行动画</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').delay(1000).fadeIn()</div>
                </div>
                <div class="method">
                    <h4>finish()方法</h4>
                    <p><strong>功能：</strong>停止并完成元素所有动画</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').finish()</div>
                </div>
            </div>
        </section>

        <section id="Ajax" class="section">
            <h2>Ajax</h2>

            <div class="subsection">
                <h3>load()方法</h3>
                <p><strong>功能：</strong>从服务器加载数据并插入到元素中</p>
                <p><strong>示例：</strong></p>
                <div class="example">$('#result').load('ajax/test.html')</div>
            </div>
            <div class="subsection">
                <h3>$.get()方法</h3>
                <p><strong>功能：</strong>通过HTTP GET请求从服务器加载数据</p>
                <p><strong>示例：</strong></p>
                <div class="example">$.get('test.php', function(data){ $('#result').html(data); })</div>
            </div>
            <div class="subsection">
                <h3>$.post()方法</h3>
                <p><strong>功能：</strong>通过HTTP POST请求向服务器发送数据</p>
                <p><strong>示例：</strong></p>
                <div class="example">$.post('test.php', {name: 'John'}, function(data){ $('#result').html(data); })</div>
            </div>
            <div class="subsection">
                <h3>$.ajax()方法</h3>
                <p><strong>功能：</strong>执行异步HTTP请求</p>
                <p><strong>示例：</strong></p>
                <div class="example">$.ajax({ url: 'test.php', type: 'POST', data: {name: 'John'}, success: function(result){ $('#result').html(result); } })</div>
            </div>
        </section>

        <section id="实用技巧" class="section">
            <h2>实用技巧</h2>

            <div class="tips">
                <div class="tip">
                    <h3>链式调用</h3>
                    <p><strong>说明：</strong>jQuery支持链式调用，可以在同一元素上连续执行多个方法</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').css('color', 'red').addClass('highlight').fadeIn()</div>
                </div>
                <div class="tip">
                    <h3>隐式迭代</h3>
                    <p><strong>说明：</strong>jQuery会自动遍历所有匹配的元素并执行操作</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('li').css('color', 'blue') // 为所有li元素设置颜色</div>
                </div>
                <div class="tip">
                    <h3>方法重载</h3>
                    <p><strong>说明：</strong>jQuery方法通常可以不传参获取值，传参设置值</p>
                    <p><strong>示例：</strong></p>
                    <div class="example">$('div').html() // 获取内容</div>
                    <div class="example">$('div').html('新内容') // 设置内容</div>
                </div>
            </div>
        </section>
    </div>

    <footer>
        <p>jQuery学习笔记 &copy; 2023</p>
    </footer>

    <script>
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
